<div class="appointment">
  <form class="my-form card" nz-form [formGroup]="formData">
    <div class="sub-title">
      <img src="assets/images/business/dyForm/one.svg" alt="">
      <span>基本信息</span>
    </div>
    <nz-form-item>
      <nz-form-label nzRequired [nzSpan]="8">营业大厅</nz-form-label>
      <nz-form-control [nzSpan]="16">
        <nz-select formControlName="appointmentHallId"
          [nzLoading]="hallsLoading"
          (ngModelChange)="getAppointmentTypes($event)"
        >
          <nz-option [nzValue]="item.id" [nzLabel]="item.serviceHallName"
            *ngFor="let item of appointmentHalls"
          ></nz-option>
        </nz-select>
        <app-err-msg *ngIf="getControl('appointmentHallId')?.touched && getControl('appointmentHallId')?.invalid">
          请选择营业大厅
        </app-err-msg>
      </nz-form-control>
    </nz-form-item>

    <nz-form-item>
      <nz-form-label [nzSpan]="8">所在地址</nz-form-label>
      <nz-form-control [nzSpan]="16">
        <input readonly type="text" nz-input formControlName="hallAddress"> 
      </nz-form-control>
    </nz-form-item>

    <nz-form-item>
      <nz-form-label nzRequired [nzSpan]="8">预约业务</nz-form-label>
      <nz-form-control [nzSpan]="16">
        <nz-select formControlName="appointmentTypeId"
          [nzLoading]="typeLoading"
          (ngModelChange)="appointmentTypeChange($event)"
        >
          <nz-option [nzValue]="item.id" [nzLabel]="item.typeName"
            *ngFor="let item of appointmentTypes"
          ></nz-option>
        </nz-select>
        <app-err-msg *ngIf="getControl('appointmentTypeId')?.touched && getControl('appointmentTypeId')?.invalid">
          请选择预约业务
        </app-err-msg>
      </nz-form-control>
    </nz-form-item>

    <nz-form-item>
      <nz-form-label nzRequired [nzSpan]="8">预约日期</nz-form-label>
      <nz-form-control [nzSpan]="16">
        <nz-date-picker formControlName="appointmentDate" 
          (ngModelChange)="onAppointmentDate($event)"
          [nzDisabledDate]="endDisabledDate"
        >
        </nz-date-picker>
        <app-err-msg *ngIf="getControl('appointmentDate')?.touched && getControl('appointmentDate')?.invalid">
          请选择预约日期
        </app-err-msg>
      </nz-form-control>
    </nz-form-item>

    <!-- 预约时段 -->
    <nz-form-item>
      <nz-form-label nzRequired [nzSpan]="8">预约时段</nz-form-label>
      <nz-form-control [nzSpan]="16">
        <nz-select formControlName="appointmentTimeId"
          [nzLoading]="typeLoading"
        >
          <nz-option [nzValue]="item.id" [nzLabel]="item.timeDescribe"
            *ngFor="let item of appointmentTimes"
            [nzDisabled]="item.effective === '0'"
          ></nz-option>
        </nz-select>
        <app-err-msg *ngIf="getControl('appointmentTimeId')?.touched && getControl('appointmentTimeId')?.invalid">
          请选择预约时段
        </app-err-msg>
      </nz-form-control>
    </nz-form-item>

    <nz-form-item>
      <nz-form-label nzRequired [nzSpan]="8">预约人</nz-form-label>
      <nz-form-control [nzSpan]="16">
        <input type="text" nz-input formControlName="appointmentUserName">
        <app-err-msg *ngIf="getControl('appointmentUserName')?.touched && getControl('appointmentUserName')?.invalid">
          校验失败
        </app-err-msg>
      </nz-form-control>
    </nz-form-item>

    <!-- 手机号 -->
    <nz-form-item>
      <nz-form-label nzRequired [nzSpan]="8">手机号</nz-form-label>
      <nz-form-control [nzSpan]="16">
        <input type="text" nz-input formControlName="appointmentUserTel">
        <app-err-msg *ngIf="getControl('appointmentUserTel')?.touched && getControl('appointmentUserTel')?.invalid">
          请输入正确格式的手机号
        </app-err-msg>
      </nz-form-control>
    </nz-form-item>

    <!-- 手机号 -->
    <nz-form-item>
      <nz-form-label nzRequired [nzSpan]="8">验证码</nz-form-label>
      <nz-form-control [nzSpan]="16">
        <div>
          <input type="text" style="width: 200px" nz-input formControlName="verificationCode">
          <app-v-code [phone]="getControl('appointmentUserTel')"></app-v-code>
        </div>
        <app-err-msg *ngIf="getControl('verificationCode')?.touched && getControl('verificationCode')?.invalid">
          请输入验证码
        </app-err-msg>
      </nz-form-control>
    </nz-form-item>

    
  </form>

  <div class="form-btn">
    <button class="form-btn-cancel" nz-button nzType="default"
      [nzLoading]="formBtnLoading"
      (click)="cancel()"
    >取消</button>
    <button class="form-btn-ok" nz-button nzType="primary"
      [nzLoading]="formBtnLoading"
      (click)="submit()"
    >提交</button>
  </div>
</div>